<template>
  <transition>
  <div class="app-add-address">
    <div class="module-form app-main">
      <mt-field label="收货人" placeholder="请输入收货人" v-model="name"></mt-field>
      <mt-field label="联系方式" placeholder="请输入联系方式" v-model="phone"></mt-field>
      <mt-field label="所在地区" placeholder="请输入所在地区" v-model="palce"></mt-field>
      <mt-field label="详细地址" placeholder="请输入详细地址" v-model="address"></mt-field>
      <div>
        <mt-picker :slots="addressSlots" class="picker" @change="onAddressChange" :visible-item-count="5" ></mt-picker >
        <mt-picker :slots="streetSlots" ref="picker" class="picker" @change="onStreetChange" :visible-item-count="5" ></mt-picker >
        上门服务地址:{{ addressProvince }} {{ addressCity }}{{ addressXian }}
      </div>
      <div class="button-content">
        <mt-button type="primary" @click="handleLogin">确认</mt-button>
      </div>
    </div>
  </div>
    </transition>
</template>

<script>
  import { Header,Cell,Field,Button,Toast,Picker  } from 'mint-ui';
  import s from '../../../static/address.json'
export default {
  components:{
    Header,
    Cell,
  },
  data () {
    return {
      name:'',
      phone:'',
      palce:'',
      address:'',
      companyName:'',
      storeList:{

      },
      addressSlots: [
        {
          flex: 1,
          defaultIndex: 1,
          values: Object.keys(s),
          className: 'slot1',
          textAlign: 'center'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: [],
          className: 'slot3',
          textAlign: 'center'
        }, {
          divider: true,
          content: '-',
          className: 'slot4'
        }, {
          flex: 1,
          values: [],
          className: 'slot5',
          textAlign: 'center'
        }
      ],
      streetSlots: [
        {
          flex: 1,
          values: [],
          className: 'slot1',
          textAlign: 'center'
        }
      ],
      addressProvince: '省',
      addressCity: '市',
      addressXian: '区',
      addressStreet: '街道',
    }
  },
  watch: {
    'addressXian': {
      handler(val, oval){
        this.streetSlots[0].values=[];
        if(typeof this.xianObj!=='undefined'){
          var street = this.xianObj[this.addressXian];
          for(var i=0;i<street.length;i++){
            console.log(street[i].storeName)
            this.streetSlots[0].values.push(street[i].name);
          }
        }
      }
    }
  },
  mounted(){
    this.$nextTick(() => {
      setTimeout(() => {//这个是一个初始化默认值的一个技巧
      this.addressSlots[0].defaultIndex = 0;
    }, 100);
  });
  },
  methods:{
//    onAddressChange(picker, values) {
//      let sheng = Object.keys(s);
//      let shi = Object.keys(s[values[0]]);
//      let index=shi.indexOf(values[1])
//      var xian = s[values[0]][shi[index]];
//      picker.setSlotValues(1, shi);
//      this.addressProvince = values[0];
//      this.addressCity = values[1];
//      this.addressXian = values[2];
//      if(typeof xian!=='undefined'){
//        picker.setSlotValues(2, Object.keys(xian));
//      }
//    },
    onAddressChange(picker, values) {
      let sheng = Object.keys(s);
      let shi = Object.keys(s[values[0]]);

      let index=shi.indexOf(values[1])
      let xian = s[values[0]][shi[index]];
      this.xianObj = xian;
      picker.setSlotValues(1, shi);
      this.addressProvince = values[0];
      this.addressCity = values[1];
      this.addressXian = values[2];
            if(typeof xian!=='undefined'){
              picker.setSlotValues(2, Object.keys(xian));
      }
    },
    onStreetChange(picker, values){
      this.addressStreet = values[0]
    },
    handleLogin(){

      if(this.name==''){
        Toast({
          message: '请输入收货人',
          position: 'middle',
          duration:1000
        });
        return false;
      }

      if(this.phone==''){
        Toast({
          message: '请输入联系方式',
          position: 'middle',
          duration:1000
        });
        return false;
      }
      if(this.palce==''){
        Toast({
          message: '请输入所在地区',
          position: 'middle',
          duration:1000
        });
        return false;
      }
      if(this.address==''){
        Toast({
          message: '请输入详细地址',
          position: 'middle',
          duration:1000
        });
        return false;
      }
      var params = new URLSearchParams();
      params.append('name', this.name);
      this.$axios({
        method: 'post',
        url:'gp/',
        data:params
      }).then((res)=>{
    });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
  .app-add-address .button-content{
    padding:24px;
  }
  .app-add-address .button-content .mint-button{
    background:#c34853;
    display: block;
    width: 100%;
  }
  .app-add-address .mint-field .mint-cell-title{
    width:90px;
  }
</style>
